<template>
	<div id="app">
		<router-view></router-view>
		
		<image-dialog ref="imageDialog" :max="maxChooseImage"></image-dialog>
		<sku-dialog ref="skuDialog"></sku-dialog>
	</div>
	

</template>

<script>
	import imageDialog from "@/components/image/image-dialog.vue";
	import skuDialog from "@/components/skus/sku-dialog.vue";
	
	export default {
		name: 'app',
		
		components: {
			imageDialog,
			skuDialog,
		},
		
		//依赖注入
		provide() {
			return {
				app: this
			}
		},
		
		data() {
			return {
				maxChooseImage: 9
			}
		},
		
		created() {
			//初始化用户信息
			this.$store.commit('initUser')
			//初始化后台菜单
			this.$store.commit('initNavBar')
		},

		methods: {
			//选择图片
			showImageModel(callback, max = 9) {
				this.maxChooseImage = max
				this.$refs.imageDialog.showImageModel(callback)
			},
			
			//选择规格
			chooseSkus(callback) {
				this.$refs.skuDialog.chooseSkus(callback)
			}
		}
		
		
		
		
	}
</script>

<style>
::-webkit-scrollbar-track
{
	background-color: rgba(0,0,0,.1);
	border-radius: 0;
}
::-webkit-scrollbar
{
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-thumb
{
	cursor: pointer;
	border-radius: 5px;
	background: rgba(0,0,0,.25);
	transition: color .2s ease;
}
</style>
